// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    cartList: [], // 购物车数据
  },
  mutations: {
    // 添加商品
    add(state, item) {
      let flag = false;
      // 加购去重（通过id判断）
      state.cartList.forEach(i => {
        if (i.item.id == item.id) {
          i.num++;
          flag = true;
        }
      })
      if (flag == false) {
        state.cartList.push({
          num: 1, // 添加数量默认为1
          item, // 添加购物车商品数据
          ckd: false, // 添加复选框初始化状态为false
        })
      }
      console.log(state)
    },
    // 删除商品
    del(state, index) {
      state.cartList.splice(index, 1)
    },
    /* 改变购物车商品数目 */
    changeNum(state, index) {
      state.cartList.num = index
    },
    /* 更新购物车中选中的商品 */
    ckd(state, newAll) {
      state.cartList.forEach(item => {
        item.ckd = newAll
      })
    },
    /* 结算商品 */
    dels(state,index){
      state.cartList.splice(index)
    }
  },

  //计算
  getters: {
    // 总价
    total(state) {
      let sum = 0;
      state.cartList.forEach(item => {
        // 如果复选框选中 计算总价
        if (item.ckd == true) {
          sum += item.num * item.item.price
        }
      })
      return sum
    },
    //总数量
    number(state) {
      let number = 0;
      state.cartList.forEach(item => {
        // 如果复选框选中 计算总价
        if (item.ckd == true) {
          number += item.num
        }
      })
      return number
    }
  },
  // Vuex存储插件，将购物车列表存储在localStorage中
  plugins: [
    new VuexPersist({
      storage: window.localStorage,
    }).plugin,
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store:store,
  components: { App },
  template: '<App/>'
})

